<template>
    <div>
        <v-progress-linear v-if="loading" indeterminate></v-progress-linear>
        <v-app-bar app elevation="0" dense color="white">
            <v-btn icon @click="$router.go(-1)">
                <v-icon>mdi-arrow-left</v-icon>
            </v-btn>
            <v-toolbar-title class="text-center flex-grow-1 subtitle-1"
                >客户信息</v-toolbar-title
            >
            <v-btn plain text :ripple="false"> </v-btn>
        </v-app-bar>

        <v-container>
            <v-card elevation="1" class="pa-4 text--primary sticky-info">
                <v-row dense class="align-center">
                    <v-col cols="12" class="d-inline-flex align-center">
                        <span class="font-weight-bold subtitle-1">{{
                            loan.name
                        }}</span>

                        <v-btn
                            x-small
                            :loading="loadingPhone"
                            @click="loadTelephoneNoAndCall"
                            color="primary"
                            class="ml-4"
                            depressed
                            outlined
                            rounded
                            v-if="loan.name && loan.name.length > 0"
                        >
                            拨打
                            <v-icon x-small>mdi-phone-outgoing</v-icon>
                        </v-btn>

                        <v-spacer></v-spacer>

                        <v-dialog v-model="statusDialog" width="500">
                            <template v-slot:activator="{ on, attrs }">
                                <v-btn
                                    text
                                    small
                                    color="primary"
                                    v-bind="attrs"
                                    v-on="on"
                                >
                                    {{ loan.status_name
                                    }}


                                    <v-chip
                                        v-if="loan.status != 15 && loan.status != 16 && loan.status != 17 "
                                        label
                                        small
                                        outlined
                                        class="px-2"
                                        color="primary"
                                    >
                                        <v-icon x-small
                                        >mdi-pencil-outline</v-icon
                                        >线索标记
                                    </v-chip>

                                </v-btn>
                            </template>
                            <v-card>
                                <v-card-title>更新状态</v-card-title>
                                <v-card-text>
                                    <v-select
                                        :items="statusItem"
                                        v-model="statusNew"
                                        label="状态"
                                    >
                                    </v-select>
                                </v-card-text>
                                <v-card-actions>
                                    <v-spacer></v-spacer>
                                    <v-btn @click="statusDialog = false">
                                        关闭
                                    </v-btn>
                                    <v-btn
                                        @click="updateStatus"
                                        :loading="savingStatus"
                                        color="primary"
                                    >
                                        保存
                                    </v-btn>
                                </v-card-actions>
                            </v-card>
                        </v-dialog>
                    </v-col>
                    <v-col cols="12">
                        <span class="text--secondary">订单编号: </span>
                        {{loan.number}}
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">贷款类别: </span>
                        <span class="font-weight-regular primary--text">{{
                            loan.category_type
                        }}</span>
                    </v-col>
<!--                    <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">征信情况4: </span>-->
<!--                        <span class="font-weight-regular">一般</span>-->
<!--                    </v-col>-->
                    <v-col cols="6">
                        <span class="text--secondary">贷款金额: </span>
                        <span
                            class="primary--text font-weight-bold subtitle-2"
                            v-if="loan.amount_start == loan.amount_end"
                            >{{ loan.amount_start_zh }}</span
                        >
                        <span
                            class="primary--text font-weight-bold subtitle-2"
                            v-else
                            >{{ loan.amount_start_zh }}-{{
                                loan.amount_end_zh
                            }}</span
                        >
                        元
                    </v-col>


                    <v-col cols="6">
                        <span class="text--secondary">抢单需要: </span>
                        <span class="primary--text font-weight-bold subtitle-2">{{loan.need_ticket}}</span>
                        金币
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">渠道: </span>
                        {{loan.channel_name}}
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">申请时间: </span>
                        <span>{{
                            loan.apply_at
                                ? loan.apply_at
                                      .substring(0, 10)
                                      .replaceAll("-", "/")
                                : ""
                        }}</span>
                    </v-col>

                    <v-col cols="6" v-if="loan.status == 17">
                        <span class="text--secondary">退款失败</span>
                        <span class="primary--text font-weight-bold subtitle-2" v-if="loan.refund_msg">{{loan.refund_msg}}</span>
                    </v-col>
                </v-row>
                <v-row dense>
                    <v-col
                        @click="tagDialog = true"
                        v-if="selectedTags.length > 0"
                    >
                        <v-chip
                            class="mr-1"
                            label
                            small
                            outlined
                            color="primary"
                            v-for="tag of selectedTags"
                            :key="tag.id"
                        >
                            {{ tag.title }}
                        </v-chip>
                    </v-col>

                    <v-col @click="openConfirmDialog()" v-if="loan.status !== 15 &&loan.status !== 16 && loan.status !== 17">
                        <v-chip
                            label
                            small
                            outlined
                            class="px-2"
                            color="primary"
                        >
                            <v-icon x-small>mdi-square-edit-outline</v-icon
                            >申请退单
                        </v-chip>
                    </v-col>

<!--                    <v-col @click="tagDialog = true" v-else-if="!loading">-->
<!--                        <v-chip-->
<!--                            label-->
<!--                            small-->
<!--                            outlined-->
<!--                            class="px-2"-->
<!--                            color="primary"-->
<!--                        >-->
<!--                            <v-icon x-small>mdi-square-edit-outline</v-icon-->
<!--                            >申请退单-->
<!--                        </v-chip>-->
<!--                    </v-col>-->
                </v-row>
            </v-card>


            <!-- 确认对话框 -->
            <v-dialog v-model="dialog" max-width="400">
                <v-card>
                    <v-card-title class="text-h6">
                        确认退单
                    </v-card-title>
                    <v-card-text>
                        确定要执行退单操作吗？此操作不可撤销！如果提供恶意虚假退单，我们会进行封号操作
                    </v-card-text>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn text @click="dialog = false">取消</v-btn>
                        <v-btn color="error" @click="handleConfirm">确认退单</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>

            <v-dialog v-model="showdialog" max-width="400">
                <v-card>
                    <v-card-title class="text-h6">
                        申请退单成功
                    </v-card-title>
                    <v-card-text>
                        请联系人工客服，并提供通话记录，录音，客户姓名，手机号，客服进行审核后会提供下一步操作
                    </v-card-text>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="info" @click="showdialog = false">确认</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>



<!--            <p-->
<!--                class="px-4 font-weight-regular mt-4 mb-2 d-inline-flex align-center"-->
<!--            >-->
<!--                <v-icon small class="mr-1">mdi-account-tie</v-icon>基本信息12-->
<!--            </p>-->
<!--            <v-card elevation="0" class="pa-4 text&#45;&#45;primary">-->
<!--                <v-row dense class="align-center">-->
<!--                    <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">年龄: </span>-->
<!--                        <span class="font-weight-regular">{{-->
<!--                            loan.profile.age-->
<!--                        }}</span>-->
<!--                    </v-col>-->
<!--                    <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">性别: </span>-->
<!--                        <span class="font-weight-regular">{{-->
<!--                            loan.profile.gender-->
<!--                        }}</span>-->
<!--                    </v-col>-->
<!--                    <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">学历: </span>-->
<!--                        <span class="font-weight-regular">{{-->
<!--                            loan.profile.education-->
<!--                        }}</span>-->
<!--                    </v-col>-->
<!--                    <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">城市: </span>-->
<!--                        <span class="font-weight-regular">{{ loan.city }}</span>-->
<!--                    </v-col>-->
<!--                    <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">月收入: </span>-->
<!--                        <span class="font-weight-regular">{{-->
<!--                            loan.profile.salary-->
<!--                        }}</span>-->
<!--                    </v-col>-->
<!--                    <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">工资发放模式: </span>-->
<!--                        <span class="font-weight-regular">{{-->
<!--                            loan.profile.pay_method-->
<!--                        }}</span>-->
<!--                    </v-col>-->
<!--                    <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">社保缴费年数: </span>-->
<!--                        <span class="font-weight-regular">{{-->
<!--                            loan.profile.social_insurance_age-->
<!--                        }}</span>-->
<!--                    </v-col>-->
<!--                </v-row>-->
<!--            </v-card>-->

            <p
                class="px-4 font-weight-regular mt-4 mb-2 d-inline-flex align-center"
            >
                <v-icon small class="mr-1">mdi-tray-full</v-icon>资产情况
            </p>
            <v-card elevation="0" class="pa-4 text--primary">
                <v-row dense class="align-center">
                    <v-col cols="6">
                        <span class="text--secondary">是否有房: </span>
                        <span class="font-weight-regular">{{loan.has_house}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">是否有车: </span>
                        <span class="font-weight-regular">{{loan.has_car}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">是否有社保: </span>
                        <span class="font-weight-regular">{{loan.has}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">是否有公司: </span>
                        <span class="font-weight-regular">{{loan.yingyezhizhao}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">是否有公积金: </span>
                        <span class="font-weight-regular">{{loan.has_gongjijin}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">芝麻分: </span>
                        <span class="font-weight-regular">{{loan.zhima}}</span>
                    </v-col>
                </v-row>
            </v-card>

            <p class="px-4 font-weight-regular mt-4 mb-2 d-inline-flex align-center" v-if="loan.category_type == '精准车'">
                <v-icon small class="mr-1">mdi-office-building-outline</v-icon>车辆情况
            </p>
            <v-card elevation="0" class="pa-4 text--primary" v-if="loan.category_type == '精准车'">
                <v-row dense class="align-center">
                    <v-col cols="6">
                        <span class="text--secondary">车辆信息: </span>
                        <span class="font-weight-regular">{{loan.car.info}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">汽车型号: </span>
                        <span class="font-weight-regular">{{loan.car.car_model}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">预估价: </span>
                        <span class="font-weight-regular">{{loan.car.car_price_estimation}}</span>
                    </v-col>
                </v-row>
            </v-card>




            <p class="px-4 font-weight-regular mt-4 mb-2 d-inline-flex align-center" v-if="loan.category_type == '精准公积金'">
                <v-icon small class="mr-1">mdi-office-building-outline</v-icon>公积金情况
            </p>
            <v-card elevation="0" class="pa-4 text--primary" v-if="loan.category_type == '精准公积金'">
                <v-row dense class="align-center">
                    <v-col cols="6">
                        <span class="text--secondary">上班公司名字全称: </span>
                        <span class="font-weight-regular">{{loan.profile.company_name}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">工资发放模式: </span>
                        <span class="font-weight-regular">{{loan.profile.pay_method}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">每个月工资多少: </span>
                        <span class="font-weight-regular">{{loan.profile.month_salary}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">已购买公积金多少年: </span>
                        <span class="font-weight-regular">{{loan.profile.provident_age}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">每月公积金额度: </span>
                        <span class="font-weight-regular">{{loan.profile.month_provident}}</span>
                    </v-col>
                </v-row>
            </v-card>



            <p class="px-4 font-weight-regular mt-4 mb-2 d-inline-flex align-center" v-if="loan.category_type == '精准房'">
                <v-icon small class="mr-1">mdi-office-building-outline</v-icon>房情况
            </p>
            <v-card elevation="0" class="pa-4 text--primary" v-if="loan.category_type == '精准房'">
                <v-row dense class="align-center">
                    <v-col cols="6">
                        <span class="text--secondary">房屋类型: </span>
                        <span class="font-weight-regular">{{loan.house.type}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">是否持有房产证: </span>
                        <span class="font-weight-regular">{{loan.house.has_certificate}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">房子最新评估价: </span>
                        <span class="font-weight-regular">{{loan.house.latest_estimated}}</span>
                    </v-col>
                </v-row>
            </v-card>


            <p class="px-4 font-weight-regular mt-4 mb-2 d-inline-flex align-center" v-if="loan.category_type == '精准企业主'">
                <v-icon small class="mr-1">mdi-office-building-outline</v-icon>企业主情况
            </p>
            <v-card elevation="0" class="pa-4 text--primary" v-if="loan.category_type == '精准企业主'">
                <v-row dense class="align-center">
                    <v-col cols="6">
                        <span class="text--secondary">公司名字: </span>
                        <span class="font-weight-regular">{{loan.company.company_name}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">年缴税: </span>
                        <span class="font-weight-regular">{{loan.company.annal_tax}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">年营业额: </span>
                        <span class="font-weight-regular">{{loan.company.annal_turnover}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">营业执照办理了几年: </span>
                        <span class="font-weight-regular">{{loan.company.company_age}}</span>
                    </v-col>
                    <v-col cols="6">
                        <span class="text--secondary">是否为法人: </span>
                        <span class="font-weight-regular">{{loan.company.is_legal_person}}</span>
                    </v-col>
                </v-row>
            </v-card>


            <!--            <p-->
<!--                class="px-4 font-weight-regular mt-4 mb-2 d-inline-flex align-center"-->
<!--            >-->
<!--                <v-icon small class="mr-1">mdi-office-building-outline</v-icon-->
<!--                >公司情况-->
<!--            </p>-->
<!--            <v-card elevation="0" class="pa-4 text&#45;&#45;primary">-->
<!--                <v-row dense class="align-center">-->
<!--                    <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">年营业额: </span>-->
<!--                        <span class="font-weight-regular">{{-->
<!--                            loan.company.annal_turnover-->
<!--                        }}</span>-->
<!--                    </v-col>-->
<!--                    <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">年缴税: </span>-->
<!--                        <span class="font-weight-regular">{{-->
<!--                            loan.company.annal_tax-->
<!--                        }}</span>-->
<!--                    </v-col>-->
<!--                    <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">营业执照年限: </span>-->
<!--                        <span class="font-weight-regular">{{-->
<!--                            loan.company.company_age-->
<!--                        }}</span>-->
<!--                    </v-col>-->
<!--                    <v-col cols="6">-->
<!--                        <span class="text&#45;&#45;secondary">是否为法人: </span>-->
<!--                        <span class="font-weight-regular">{{-->
<!--                            loan.company.is_legal_person-->
<!--                        }}</span>-->
<!--                    </v-col>-->
<!--                </v-row>-->
<!--            </v-card>-->

            <v-row dense no-gutters class="font-weight-regular">
                <v-col
                    class="px-4 mt-4 mb-2 d-inline-flex align-center"
                    cols="auto"
                >
                    <v-icon small class="mr-1">mdi-comment-outline</v-icon
                    >跟踪记录
                </v-col>
                <v-col
                    class="px-4 mt-4 mb-2 d-inline-flex align-center justify-end"
                >

                    <v-chip
                        label
                        small
                        outlined
                        class="px-2"
                        color="primary"
                    >
                        <router-link
                            class="text-decoration-none"
                            :to="`/user/loan/${this.id}/comment`"
                        >点击手动记录每次沟通内容</router-link
                        >

                    </v-chip>

<!--                    <router-link-->
<!--                        class="text-decoration-none"-->
<!--                        :to="`/user/loan/${this.id}/comment`"-->
<!--                        >更多</router-link-->
<!--                    >-->
                </v-col>
            </v-row>
            <v-card elevation="0" class="pa-4 text--primary">
                <div v-for="(item, index) of logs" :key="item.id">
                    <v-divider v-if="index > 0"></v-divider>
                    <v-row dense no-gutters>
                        <v-col cols="auto">
                            <v-avatar size="35" class="mt-2 mr-2">
                                <v-img src="/asset/h5/img/avatar.png"></v-img>
                            </v-avatar>
                        </v-col>
                        <v-col>
                            <div class="pt-1">
                                <span class="subtitle-2">{{
                                    item.user_name
                                }}</span>
                                <span class="ml-4 text-caption">{{
                                    item.created_at
                                }}</span>
                            </div>
                            <div class="pb-1 my-2">{{ item.comment }}</div>
                        </v-col>
                    </v-row>
                </div>
            </v-card>
        </v-container>

        <v-dialog
            v-model="tagDialog"
            fullscreen
            hide-overlay
            transition="dialog-bottom-transition"
        >
            <v-card color="grey lighten-4">
                <v-toolbar dense flat tile color="grey lighten-4">
                    <v-btn icon @click="tagDialog = false"> 取消 </v-btn>
                    <v-spacer></v-spacer>

                    <v-btn depressed color="primary" @click="saveTagRelation">
                        完成
                    </v-btn>
                </v-toolbar>

                <v-container class="white">
                    <v-chip-group column>
                        <v-chip
                            color="primary"
                            label
                            v-for="tag of selectedTags"
                            :key="tag.id"
                            outlined
                        >
                            {{ tag.title }}
                        </v-chip>
                        <v-chip disabled style="background: none"
                            >点选下面标签</v-chip
                        >
                    </v-chip-group>
                </v-container>

                <v-container>
                    <v-row dense no-gutters class="caption text--secondary">
                        <v-col> 全部标签 </v-col>
                        <v-col class="text-right"> 标签管理 </v-col>
                    </v-row>
                    <v-chip-group
                        v-model="selectedTags"
                        column
                        multiple
                        active-class="primary--text"
                    >
                        <v-chip
                            label
                            v-for="tag of tags"
                            :key="tag.id"
                            outlined
                            :value="tag"
                        >
                            {{ tag.title }}
                        </v-chip>
                        <span
                            class="px-2 v-chip v-chip--clickable v-chip--label v-chip--no-color theme--light v-chip--outlined v-size--default"
                            @click="newTagDialog = true"
                        >
                            <v-icon small>mdi-plus</v-icon>新标签
                        </span>
                    </v-chip-group>
                </v-container>
            </v-card>
        </v-dialog>

        <v-dialog v-model="newTagDialog">
            <v-card>
                <v-card-title></v-card-title>
                <v-card-text>
                    <v-text-field
                        filled
                        rounded
                        dense
                        hide-details
                        placeholder="标签名称"
                        required
                        v-model="newTagTitle"
                    ></v-text-field>
                </v-card-text>
                <v-card-actions>
                    <v-btn
                        block
                        depressed
                        color="primary"
                        :loading="savingTag"
                        @click="saveNewTag"
                    >
                        确定
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data: () => ({
        id: 0,
        telephone_no: "",
        tagDialog: false,
        newTagDialog: false,
        newTagTitle: "",
        loan: {
            profile: {},
            house: {},
            car: {},
            company: {},
        },
        showdialog: false,
        dialog: false,    // 控制对话框显示
        tags: [],
        logs: [],
        selectedTags: [],
        loading: false,
        loadingPhone: false,
        savingTag: false,
        statusDialog: false,
        savingStatus: false,
        statusNew: 0,
        statusItem: [
            { value: 1, text: "待跟进" },
            { value: 2, text: "已通话" },
            { value: 3, text: "已上门" },
            { value: 4, text: "已签约" },
            { value: 5, text: "已放款" },
            { value: 6, text: "已拒绝" },

            { value: 7, text: "恶意/骚扰" },
            { value: 8, text: "无效对话" },
            { value: 9, text: "空错号" },
            { value: 10, text: "回访-电话3次未接通" },
            { value: 11, text: "非本人" },
            { value: 12, text: "无意向" },
            { value: 13, text: "异地" },
            { value: 14, text: "资质不符" },
        ],
    }),
    watch: {
        id(v) {
            this.load();
        },
    },

    created() {
        this.id = this.$route.params.id;
        this.loadTag();
    },

    beforeRouteUpdate(to, from, next) {
        this.id = to.params.id;
        next();
    },
    methods: {
        // 打开对话框并记录订单ID
        openConfirmDialog() {
            this.dialog = true;
        },
        handleConfirm(){
            const that = this;
            axios
                .post(`/v1/user/loan/${this.id}/status`, {
                    status: 15,
                })
                .then((response) => {
                    if (response.data.code == 0) {
                        that.load();
                        that.dialog = false;
                        that.showdialog = true;
                    } else {
                        that.$toasted.show(response.data.msg, {
                            type: "error",
                        });
                    }
                })
                .catch(function () {})
                .then(function () {});

        },
        makeCall() {
            window.location.href = "tel://" + this.telephone_no;
        },
        loadTelephoneNoAndCall() {
            const that = this;
            that.loadingPhone = true;
            axios
                .get(`/v1/user/loan/${this.id}/telephone`)
                .then((response) => {
                    if (response.data.code == 0) {
                        that.telephone_no = response.data.data;
                        that.makeCall();
                    } else {
                        that.$toasted.show(response.data.msg, {
                            type: "error",
                        });
                    }
                })
                .catch(function () {})
                .then(function () {
                    that.loadingPhone = false;
                });
        },
        load() {
            this.loading = true;
            const that = this;
            axios
                .get(`/v1/user/loan/${this.id}`)
                .then((response) => {
                    if (response.data.code == 0) {
                        that.loan = response.data.data;
                        that.selectedTags = response.data.data.tags;
                        that.logs = response.data.data.logs;
                    } else {
                        that.$toasted.show(response.data.msg, {
                            type: "error",
                        });
                    }
                })
                .catch(function () {})
                .then(function () {
                    that.loading = false;
                });
        },

        loadTag() {
            const that = this;
            axios
                .get(`/v1/user/tag`)
                .then((response) => {
                    if (response.data.code == 0) {
                        that.tags = response.data.data.items;
                    } else {
                        that.$toasted.show(response.data.msg, {
                            type: "error",
                        });
                    }
                })
                .catch(function () {})
                .then(function () {});
        },

        loadTagRelation() {
            const that = this;
            axios
                .get(`/v1/user/loan/${this.id}/tag`)
                .then((response) => {
                    if (response.data.code == 0) {
                        that.selectedTags = response.data.data;
                    } else {
                        that.$toasted.show(response.data.msg, {
                            type: "error",
                        });
                    }
                })
                .catch(function () {})
                .then(function () {});
        },

        saveTagRelation() {
            const that = this;
            axios
                .post(`/v1/user/loan/${this.id}/tag`, {
                    tags: this.selectedTags,
                })
                .then((response) => {
                    if (response.data.code == 0) {
                        that.tagDialog = false;
                        that.loadTagRelation();
                    } else {
                        that.$toasted.show(response.data.msg, {
                            type: "error",
                        });
                    }
                })
                .catch(function () {})
                .then(function () {});
        },

        saveNewTag() {
            const that = this;
            that.savingTag = true;
            axios
                .post(`/v1/user/tag`, {
                    title: that.newTagTitle,
                })
                .then((response) => {
                    if (response.data.code == 0) {
                        that.tags.push(response.data.data);
                        that.newTagDialog = false;
                        that.newTagTitle = "";
                    } else {
                        that.$toasted.show(response.data.msg, {
                            type: "error",
                        });
                    }
                })
                .catch(function () {})
                .then(function () {
                    that.savingTag = false;
                });
        },

        updateStatus() {
            const that = this;
            that.savingStatus = true;
            axios
                .post(`/v1/user/loan/${this.id}/status`, {
                    status: this.statusNew,
                })
                .then((response) => {
                    if (response.data.code == 0) {
                        that.load();
                        that.statusDialog = false;
                    } else {
                        that.$toasted.show(response.data.msg, {
                            type: "error",
                        });
                    }
                })
                .catch(function () {})
                .then(function () {
                    that.savingStatus = false;
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.border-left-red {
    border-left: 3px solid #ba2b39;
}

.grid-btn .v-btn .v-btn__content {
    flex-direction: column-reverse;
    height: inherit;
}

div.bg-curved {
    position: absolute;
    overflow: hidden;
    height: 180px;
    width: 100%;
}

div.bg-curved::before {
    background-color: #ba2b39;
    border-radius: 100%;
    position: absolute;
    right: -200px;
    left: -200px;
    top: -200px;
    content: "";
    bottom: 0;
}

.theme--light.half-transparent.v-text-field--solo
    > .v-input__control
    > .v-input__slot {
    background-color: rgb(255 255 255 / 71%);
}

.sticky-info {
    position: sticky;
    top: 60px;
    z-index: 2;
}
</style>
